import React, { useEffect } from 'react'
import { Button } from 'antd-mobile'
import { useSelector, useDispatch } from 'umi'
import './assets/css/style.scss'
function index(props) {
  const countState = useSelector(state=> state.count)
  const dispatch = useDispatch();
  const addNum = (num) => {
    dispatch({
      type: 'count/add',
      num
    })
  }

  useEffect(() => {
    dispatch({
      type: 'count/getItems',
      params: {
        page: 1,
        pageSize: 10
      }
    })
  }, [])
  return (
    <div>
      <h2>首页</h2>
      <Button onClick={
        () => {
          addNum(5)
        }
      }>按钮</Button>
      { countState.num }

      <hr />
      <ul>
        {
          countState.items.map(item => {
            return (
              <li key={item.id}>
                {item.name}
              </li>
            )
          })
        }
       
      </ul>

      <div id="box"></div>
    </div>
  )
}

export default index